<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2022-07-12 17:02:06
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2022-07-13 16:08:08
 * @FilePath: \vue2-basic\src\views\echarts\liquidFill.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    水球图
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="main1" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data () {
    return {

    }
  },

  created () {
  },
  mounted () {
    var myChart = echarts.init(document.getElementById('main'))
    var myChart1 = echarts.init(document.getElementById('main1'))
    // var value = 0.45
    // var value1 = 0.76
    // var data = [value]
    const option = {
      series: [{
        type: 'liquidFill',
        data: [0.6]
      }]
    }
    // const options = {
    //   backgroundColor: 'transparent', // 画布背景色

    // }
    myChart.setOption(option)
    function Pie () {
      let dataArr = []
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 50,
            itemStyle: {
              normal: {
                color: "#00AFFF",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
      return dataArr
    }
    const options = {
      backgroundColor: 'transparent', // 画布背景色
      // title: {
      //   text: '',
      //   textStyle: {
      //     fontWeight: 'normal',
      //     fontSize: 25,
      //     color: 'rgb(97, 142, 205)'
      //   }
      // },
      series: [
        {
          // value: 50, //  内容 配合formatter
          type: 'liquidFill',
          radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
          center: ['50%', '50%'],
          data: [0.87, {
            value: 0.87,
            direction: 'left', //波浪方向
          }], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'rgba(62, 208, 255, 1)' // 球体本景色
          },
          amplitude: '6  %',//波浪的振幅
          // 修改波浪颜色
          // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
          color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: '#6CDEFC',
              },
              {
                offset: 0,
                color: '#429BF7',
              },
            ],
            globalCoord: false,
          },
          ],
          label: {
            normal: {
              // formatter: 0.87 * 100 + '\n%',
              formatter: 0.87 * 100 + '\n{d|%}',
              //  formatter: function(params){
              //     return params.value* 100 + " \n%";
              // },
              rich: {
                d: {
                  fontSize: 20,
                }
              },
              textStyle: {
                fontSize: 36,
                color: '#fff'
              }
            },

          },
          outline: {
            show: false
          }
        },
        {
          type: 'pie',
          z: 1,
          center: ['50%', '50%'],
          radius: ['72%', '73.5%'], // 控制外圈圆的粗细
          hoverAnimation: false,
          data: [
            {
              name: '',
              value: 500,
              labelLine: {
                show: false
              },
              itemStyle: {
                color: '#00AFFF'
              },
              emphasis: {
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#00AFFF'
                }
              }
            }
          ]
        },
        { //外发光
          type: 'pie',
          z: 1,
          zlevel: -1,
          radius: ['70%', '90.5%'],
          center: ["50%", "50%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              borderWidth: 20,
              color: 'rgba(224,242,255,1)',
            }
          },
          label: {
            show: false
          },
          data: [100]
        },
        { //底层外发光
          type: 'pie',
          z: 1,
          zlevel: -2,
          radius: ['70%', '100%'],
          center: ["50%", "50%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              borderWidth: 20,
              color: 'rgba(224,242,255,.4)',
            }
          },
          label: {
            show: false
          },
          data: [100]
        },
        // 虚点
        {
          type: 'pie',
          zlevel: 0,
          silent: true,
          radius: ['78%', '80%'],
          z: 1,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: Pie()
        },
      ]
    }
    myChart1.setOption(options)
  }
}
</script>

<style>
</style>
